<template>
    <div class="seach-history"> 
        <van-cell title="历史记录" class="search-header">
            <template #right-icon>
                <van-icon name="delete-o" v-if="!isDelete" @click="isDelete = !isDelete"/>
                <div v-if="isDelete" class="deleteword">
                    <span  @click="$emit('clear-history',[])">全部删除</span>
                    <span @click="isDelete = !isDelete">完成</span>
                </div>
            </template>
        </van-cell>
        <van-cell-group>
            <van-cell 
            :title="history"
            v-for="(history,index) in searchHistory"
            :key="index"
            @click="deleteHistory(index,history)"
            > 
               <template #right-icon>
                   <van-icon name="close" v-if="isDelete"/>
                </template> 
            </van-cell>
        </van-cell-group>
    </div>
</template>
<script>
import { setItem } from '@/utils/storage'

export default {
 name: 'SearchHistory',
 data() {
     return {
        //  控制删除区域显示删除按钮还是两个文字
         isDelete: false 
     }
 },
 methods:{
     deleteHistory(index,history){
         //删除状态 删除历史
         if(this.isDelete){
           this.searchHistory.splice(index,1)
           //持久化
           setItem('search-history',this.searchHistory)
           return 
         } 
         //非删除状态   触发搜{索
            this.$emit('search',history)
     }
 },
 props: {
     searchHistory:{
         type: Array,
         required: true
     }
 }
}
</script>
<style lang="less" scoped>
.van-icon-delete-o ,.van-icon-close{
    margin: auto ;
}


.deleteword {
    font-size: 13px;
    color: #999;
    span{   
     margin-right: 8px;
    }
}
.search-header {
    border-bottom: unset;
}
</style>